<!DOCTYPE html>
<html>

<head>
    <title>募捐详情</title>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../element/element.css">
    <script src="../../element/vue.js"></script>
    <script src="../../element/index.js"></script>
    <script src="../../js/axios.min.js"></script>
    <script src="../../js/echarts.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="../../css/dontions.css">
    <style>
        .container {
            display: flex;
            align-items: flex-start;
        }

        .carousel-container {
            width: 50%;
            padding-right: 20px;
        }

        .form-container {
            width: 50%;
        }
    </style>

</head>

<body>
    <div id="app">
        <div class="container">
            <div class="carousel-container">
                <el-carousel height="530px">
                    <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
                        <a :href="item.link"><img :src="item.image" style="width: 100%;height: 530px;"></a>
                    </el-carousel-item>
                </el-carousel>
            </div>

            <div class="form-container">
                <el-table :data="donationList" stripe>
                    <el-table-column label="募捐简介">
                        <template slot="header">
                            <span>募捐简介</span>
                            <el-link type="primary" href="../UserFunction/donationList.html"
                                style="float:right">更多》</el-link>
                        </template>
                        <template slot-scope="scope">
                            <span v-for="(item, index) in scope.row" :key="index">{{ item }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <br>

        <el-row class="number" :gutter="20">
            <el-col>
                <template>
                    <div>
                        <el-button class="box" @click="showChart">
                            <span style="font-family: Arial, sans-serif;font-size: 24px;font-weight: bold;color: #333;">
                                今年的募捐金额折线图</span>
                        </el-button>
                        <el-dialog title="募捐金额月份折线图" :visible.sync="dialogVisible" width="80%">
                            <div ref="chart" style="height: 400px;"></div>
                        </el-dialog>
                    </div>
                </template>
            </el-col>
            <el-col>
                <el-button class="box" @click="">
                    <span style="font-family: Arial, sans-serif;font-size: 24px;font-weight: bold;color: #333;">
                        今年已募捐总金额</span>
                    <br><br><br>
                    <span class="large-font">{{ achievement.donationAmount }}</span>
                </el-button>
            </el-col>
            <el-col>
                <el-button class="box" @click="">
                    <span style="font-family: Arial, sans-serif;font-size: 24px;font-weight: bold;color: #333;">
                        今年受到帮助的人数</span>
                    <br><br><br>
                    <span class="large-font">{{ achievement.donationCount }}</span>
                </el-button>
            </el-col>
            <el-col>
                <el-button class="box" @click="">
                    <span style="font-family: Arial, sans-serif;font-size: 24px;font-weight: bold;color: #333;">
                        基金金额</span>
                    <br><br><br>
                    <span class="large-font">{{ achievement.fundAmount }}</span>
                </el-button>
            </el-col>
        </el-row>

    </div>


    <script>

        new Vue({
            el: '#app',
            data() {
                return {
                    achievement:null,
                    total: 0,
                    dialogVisible: false,
                    chartData: [],
                    donationList: [],
                    // 图片位置
                    carouselItems: [
                        { image: '../../img/3504.jpg', link: 'shou.html' },
                        { image: '../../img/3502.jpg', link: 'shou.html' },
                        { image: '../../img/3503.png', link: 'shou.html' }
                    ]
                };
            },
            mounted() {
                this.getTenDonation();
                this.getAchievement();
            },
            methods: {
                getAchievement() {
                    var self = this;
                    axios.get('http://localhost:8888/api/index/achievement')
                        .then(function (response) {
                            // 处理响应数据
                            self.achievement = response.data.data;
                            
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                getTenDonation() {
                    // 发起获取最早发布的十个募捐单的请求
                    // 使用 axios 或其他库发送 GET 请求
                    axios.get('http://localhost:8888/api/index/getTenDonation')
                        .then(response => {
                            console.log(response.data.data[0]);
                            this.donationList = response.data.data;
                            console.log(this.donationList);
                        })
                        .catch(error => {
                            // 处理请求错误
                        });
                },


                showChart() {
                    axios.get('http://localhost:8888/api/index/chartDataDonation', {
                        params: {
                            year: 0
                        }
                    })
                        .then(response => {
                            const data = response.data.data
                            this.chartData = []
                            for (let i = 1; i <= 12; i++) {
                                this.total = data[i] + this.total;
                                this.chartData.push({
                                    month: i,
                                    value: data.hasOwnProperty(i) ? data[i] : 0
                                })
                            }
                            this.dialogVisible = true
                        })
                        .catch(error => {
                            console.error(error)
                        })
                },
                renderChart() {
                    const chart = echarts.init(this.$refs.chart)
                    chart.setOption({
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'line',
                                lineStyle: {
                                    color: '#ccc',
                                    width: 1,
                                    type: 'solid'
                                }
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: this.chartData.map(item => item.month)
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name: '募捐金额',
                            type: 'line',
                            smooth: true,
                            data: this.chartData.map(item => item.value),
                            areaStyle: {}
                        }]
                    })
                }
            },
            watch: {
                dialogVisible(value) {
                    if (value) {
                        setTimeout(() => {
                            this.renderChart()
                        }, 100)
                    }
                }
            }

        });
    </script>
</body>

</html>